<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">流程选择模板列表</span>
          </div>
          <div class="header-right-wraper">
            <CButton
              color="info"
              class="system-btn-style"
              @click="addTemplate"
              data-permission="Btn_moban_add"
            >
              <CIcon name="cil-plus" />&nbsp;模板
            </CButton>
          </div>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 46px)">
            <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
              <template v-slot:taskType="item">
                <span v-html="getTaskTypeLabel(item.data.row.taskType)"></span>
              </template>
              <template v-slot:show_details="item">
                <CButton
                  title="详情"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="getInfo(item.data.row)"
                >
                  详情
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_moban_bianji"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="del(item.data.row.id)"
                  data-permission="Btn_moban_delect"
                >
                  删除
                </CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>
        <!-- <CCardBody>
          <div class="template borderStyle">
            <CDataTable
              :items="data"
              :key="data"
              :fields="fields"
              hover
              border
              class="templateMangeTable"
            >
              <template #status="{ item }">
                <td>
                  <img :src="getBadge(item.status)" alt />
                </td>
              </template>
              <template #taskType="{ item }">
                <td>
                  <span v-html="getTaskTypeLabel(item.taskType)"></span>
                </td>
              </template>
              <template #show_details="{ item }">
                <td class="py-2">
                   <CButton
                    v-c-tooltip="'详情'"
                    title="详情"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="getInfo(item)"
                  >
                    <CIcon class="colortempstyle" name="cil-line-spacing" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'编辑'"
                    title="编辑"
                    color="rgb(2,40,88)"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="update(item)"
                    data-permission="Btn_Template_Up"
                  >
                    <img
                      class="featuresstyle"
                      src="@/assets/icons/edit.svg"
                      alt
                    />
                  </CButton>
                  <CButton
                    v-c-tooltip="'删除'"
                    title="删除"
                    color="rgb(2,40,88)"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="del(item.id)"
                    data-permission="Btn_Template_Del"
                  >
                    <img
                      class="featuresstyle"
                      src="@/assets/icons/delete.svg"
                      alt
                    />
                  </CButton>
                  <CButton
                    title="详情"
                    variant="outline"
                    class="textBtnStyle"
                    @click="getInfo(item)"
                  >
                  详情
                  </CButton>
                  <CButton
                    title="编辑"
                    variant="outline"
                    class="textBtnStyle"
                    @click="update(item)"
                    data-permission="Btn_Template_Up"
                  >
                  编辑
                  </CButton>
                  <CButton
                    title="删除"
                    variant="outline"
                    class="textBtnStyle"
                    @click="del(item.id)"
                    data-permission="Btn_Template_Del"
                  >
                  删除
                  </CButton>
                </td>
              </template>
            </CDataTable>
          </div>
        </CCardBody>
        <CCardFooter class="page-link">
          <CRow>
            <CCol class="footerPage">
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10, 15, 20, 25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                  this.allNum
                }}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter>-->
      </CCard>
    </div>

    <Modal v-model="getShow" draggable scrollable title="模板信息" :width="800">
      <p slot="header" class="modalHeader">模板信息</p>
      <CRow>
        <CCol md="12" class="showContentLeft">
          <CForm>
            <CInput label="卫星" horizontal :value="item.satellite" readonly />
            <CInput label="传感器" horizontal :value="item.sensor" readonly />
            <CInput
              label="分辨率"
              horizontal
              :value="item.resolution"
              readonly
            />
            <CInput
              label="产品类型"
              horizontal
              :value="item.productType"
              readonly
            />
            <CInput
              label="生产类型"
              horizontal
              :value="getTaskTypeLabel(item.taskType)"
              readonly
            />
            <CInput label="流程" horizontal :value="item.flowName" readonly />
            <CInput label="是否自动任务" horizontal 
            :value="getSkipAutoLabel(item.skipAuto)" readonly />
          </CForm>
        </CCol>
        <CCol md="12" class="showContentRight">
          <CForm>
            <ul>
              <li
                v-for="(item, index) in showParamList"
                :key="index"
                class="paramli"
              >
                <span class="selectParamLabel">{{ item.label }}</span>
                <CInput
                  horizontal
                  :value="item.paramValue"
                  class="selectParamKey"
                  readonly
                />
              </li>
            </ul>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="showSelectAddInfoZtreeModal"
      draggable
      scrollable
      title="选择信息"
    >
      <p slot="header" class="modalHeader">选择</p>
      <CButtonClose slot="close" @click="selectAddInfoCancel" />
      <div class="treeDiv">
        <ul id="selectInfoTree" class="ztree"></ul>
      </div>

      <template #footer>
        <CButton @click="selectAddInfoCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="selectAddInfoOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="showSelectUpdateInfoZtreeModal"
      draggable
      scrollable
      title="选择信息"
    >
      <p slot="header" class="modalHeader">选择</p>
      <CButtonClose slot="close" @click="selectUpdateInfoCancel" />
      <div class="treeDiv">
        <ul id="selectInfoTree2" class="ztree"></ul>
      </div>
      <template #footer>
        <CButton @click="selectUpdateInfoCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton
          @click="selectUpdateInfoOk"
          color="info"
          class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除模板"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除模板</span>
      </p>
      <div class="modalBody">
        <p>您正在删除该模板记录信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="新增模板信息"
      :width="800"
    >
      <p slot="header" class="modalHeader">新增模板信息</p>
      <CRow class="showContent">
        <CCol md="12" class="showContentLeft">
          <CForm>
            <span class="spanLabel">
              卫星传感器选择
              <CButton
                color="info"
                size="sm"
                @click="selectAddInfo"
                class="btnSelectInfo system-btn-style"
                >选择</CButton
              >
            </span>
            <CInput
              label="卫星"
              placeholder="请点击“选择”勾选卫星信息"
              horizontal
              v-model="flowPropertyData.satellite"
              readonly
            />
            <CInput
              label="传感器"
              placeholder="请点击“选择”勾选传感器信息"
              horizontal
              v-model="flowPropertyData.sensor"
              readonly
            />
            <CSelect
              label="分辨率"
              horizontal
              :options="resolutionShowList"
              :value.sync="curResolution"
              class="selectSuffix"
              placeholder="请选择分辨率"
              @change="selectResolution($event)"
            ></CSelect>
            <CSelect
              label="产品类型"
              horizontal
              :options="productTypeList"
              :value.sync="curProductType"
              class="selectSuffix"
              @change="selectProductType($event)"
            ></CSelect>
            <CSelect
              label="生产类型"
              horizontal
              :options="taskTypeList"
              :value.sync="curTaskType"
              class="selectSuffix"
              @change="selectTaskType($event)"
            ></CSelect>
            <CSelect
              label="流程"
              horizontal
              :options="flowInfoList"
              :value.sync="curFlowId"
              class="selectSuffix"
              placeholder="请选择流程"
              @change="selectAddFlow($event)"
            ></CSelect>
              <CSelect
              label="是否自动任务"
              horizontal
              v-model="flowPropertyData.skipAuto"
              :options="autoTypeList"
              :value.sync="curSkipAuto"
              class="selectSuffix"
              placeholder="是否自动任务"
              @change="selectAddSkipAuto($event)"
            ></CSelect>
          </CForm>
        </CCol>
        <CCol md="12" class="showContentRight">
          <CForm>
            <ul>
              <li
                v-for="(item, index) in showParamList"
                :key="index"
                class="paramli"
              >
                <span class="selectParamLabel">{{ item.label }}</span>
                <!-- :value.sync="sdfdsf" -->
                <CSelect
                  horizontal
                  :options="flowParamList"
                  class="selectParamKey"
                  @change="selectParamKey($event, item.value)"
                ></CSelect>
              </li>
            </ul>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="修改模板信息"
      :width="800"
    >
      <p slot="header" class="modalHeader">修改模板信息</p>
      <CRow class="showContent">
        <CCol md="12" class="showContentLeft">
          <CForm>
            <span class="spanLabel">
              卫星传感器选择
              <CButton
                color="info"
                size="sm"
                @click="selectUpdateInfo"
                class="btnSelectInfo system-btn-style"
                >选择</CButton
              >
            </span>
            <CInput
              label="卫星"
              placeholder="请点击“选择”勾选卫星信息"
              horizontal
              v-model="updatePropertyData.upSatellite"
              readonly
            />
            <CInput
              label="传感器"
              placeholder="请点击“选择”勾选传感器信息"
              horizontal
              v-model="updatePropertyData.upSensor"
              readonly
            />
            <CSelect
              label="分辨率"
              horizontal
              :options="resolutionShowList"
              :value.sync="curUpResolution"
              class="selectSuffix"
              placeholder="请选择分辨率"
              @change="selectResolution($event)"
            ></CSelect>
            <CSelect
              label="产品类型"
              horizontal
              :options="productTypeList"
              :value.sync="curUpProductType"
              class="selectSuffix"
              @change="selectProductType($event)"
            ></CSelect>
            <CSelect
              label="生产类型"
              horizontal
              :options="taskTypeList"
              :value.sync="curUpTaskType"
              class="selectSuffix"
              @change="selectTaskType($event)"
            ></CSelect>
            <CSelect
              label="流程"
              horizontal
              :options="flowInfoList"
              :value.sync="curFlowId"
              class="selectSuffix"
              placeholder="请选择流程"
              @change="selectUpdateFlow($event)"
            ></CSelect>
             <CSelect
              label="是否自动任务"
              horizontal
              :options="autoTypeList"
              :value.sync="curSkipAuto"
              class="selectSuffix"
              placeholder="是否自动任务"
               @change="selectSkipAuto($event)"
            ></CSelect>
          </CForm>
        </CCol>
        <CCol md="12" class="showContentRight">
          <CForm>
            <ul>
              <li
                v-for="(item, index) in showParamList"
                :key="index"
                class="paramli"
              >
                <span class="selectParamLabel">{{ item.label }}</span>
                <CSelect
                  horizontal
                  :options="flowParamList"
                  :value.sync="item.paramValue"
                  class="selectParamKey"
                  @change="selectParamKey($event, item.value)"
                ></CSelect>
              </li>
            </ul>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>
<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:60px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "绑定流程",
    key: "flowName",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "卫星",
    key: "satellite",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "传感器",
    key: "sensor",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "分辨率",
    key: "resolution",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "产品类型",
    key: "productType",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "生产类型",
    key: "taskType",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "创建时间",
    key: "createTime",
    _style: "width:160px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:200px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
import TableList from "@/template/table/TableList";

export default {
  name: "flowSelectTplManage",
  components: { TableList },
  computed: {
    getColumn1() {
      return [
        { type: "selection", width: 60, align: "center" },
        { key: "id", title: "角色id", align: "center" },
        { key: "name", title: "角色名称", align: "center" },
      ];
    },
  },
  data() {
    return {
      modalStyle: { top: "340px" },
      showSelectUpdateInfoZtreeModal: false,
      showSelectAddInfoZtreeModal: false,
      delShow: false,
      updateShow: false,
      unLockShow: false,
      bindShow: false,
      selectShow: false,
      getShow: false,
      roleShow: false,
      addShow: false,
      lockShow: false,
      loading: true,
      data: [],
      item: {},
      clickId: -1,
      total: 0,
      currentPage: 1,
      proCPage: 1,
      proTotal: 0,
      data1: [],
      fields,
      typeList: [],
      userData: {
        applicationId: systemId,
        avatarPath: "",
        file: {},
        mobile: "",
        nickname: "",
        organizationId: 0,
        note: "",
        pwd: "",
        sex: 0,
        userCode: "",
        username: "",
      },
      flowPropertyData: {
        //流程属性数据
        satellite: "",
        sensor: "",
        resolution: "",
        productType: "",
        taskType: "",
        matchValue: "",
        flowId: -1,
        flowName: "",
        satelliteLevel: "",
        skipAuto:-1,
      },
      updatePropertyData: {
        //更新模板数据时，流程属性暂存数据
        upSatellite: "",
        upSensor: "",
        upResolution: "",
        upProductType: "",
        upTaskType: "",
        upFlowId: -1,
        upFlowName: "",
      },
      productTypeList: ["单景", "合成"],
      autoTypeList:[
        {value:0,
         label:"允许"
        },
        {
         value:1,
         label: "禁止"
        }],
      curProductType: "单景",
      curUpProductType: "单景",
      taskTypeList: [],
      curTaskType: "",
      curUpTaskType: "",
      selectInfoList: [], //选择的信息
      flowInfoList: [], //筛选后流程信息
      flowParamList: [], //流程参数信息，用于显示参数下拉列表
      showParamList: [], //界面显示的参数列表
      showParamValueList: [], //详情界面显示的参数与值列表
      paramKeyList: {}, //传给后台接口的参数Key对象
      curSkipAuto: -1,
      curFlowId: -1,
      resolutionShowList: [],
      curResolution: "",
      curUpResolution: "",
      pageSize: 25,
      allNum: 0,
      enterData: [],
      enterList: [],
      enterId: "",
      orgList: [],
      orgId: "",

      getColumns: [
        {
          title: "绑定流程",
          key: "flowName",
        },
        {
          title: "卫星",
          key: "satellite",
          width: 120,
          className: "centerText",
        },
        {
          title: "传感器",
          key: "sensor",
          width: 120,
          className: "centerText",
        },
        {
          title: "分辨率",
          key: "resolution",
          width: 120,
          className: "centerText",
        },
        {
          title: "产品类型",
          key: "productType",
          width: 120,
          className: "centerText",
        },
        {
          title: "生产类型",
          key: "taskType",
          slot: "taskType",
          width: 120,
          className: "centerText",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 180,
          className: "centerText",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          width: 320,
          className: "centerText",
        },
      ],
      getAxios: {
        url: this.$api.manageApi.query, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  mounted() {
    //  this.getFlowPropertyList();
    this.getAll();
    this.getTaskTypeList();
    this.selectTaskType({ target: { value: "LEVEL5A" } });
  },
  methods: {
    selectUpdateFlow(event) {
      let self = this;

      let flowId = event.target.value;
      let selectedIndex = event.target.options.selectedIndex;
      let flowName = event.target.options[selectedIndex].label;

      self.updatePropertyData.upFlowId = flowId;
      self.updatePropertyData.upFlowName = flowName;
      self.curFlowId = flowId;

      this.getFlowParamList(flowId);
    },
    selectParamKey(event, paramName) {
      let self = this;

      let paramKey = event.target.value;
      self.paramKeyList[paramName] = paramKey;
    },

    selectProductType(event) {
      let self = this;
      let productType = event.target.value;

      self.updatePropertyData.upProductType = productType;
      self.curProductType = productType;
      self.getFlowInfoList();

      //清空流程参数信息
      self.flowParamList = [];
      self.curInputParamKey = "";
      self.curOutputParamKey = "";
    },

    /* 生产类型选择 */
    selectTaskType(event) {
      let self = this;
      let taskType = event.target.value;
      self.updatePropertyData.upTaskType = taskType;
      self.curTaskType = taskType;
      self.getShowParamList(taskType);
      self.getFlowInfoList();
      //清空流程参数信息
      self.flowParamList = [];
    },
       //选择自动
    selectSkipAuto(event){
    let self = this;
    let skipAuto = event.target.value;
    self.updatePropertyData.upSkipAuto = skipAuto;
    self.curSkipAuto = skipAuto;
    },

    /*选择流程*/
    selectAddFlow(event) {
      let self = this;
      let flowId = event.target.value;

      let selectedIndex = event.target.options.selectedIndex;
      let flowName = event.target.options[selectedIndex].label;

      self.flowPropertyData.flowId = flowId;
      self.flowPropertyData.flowName = flowName;
      self.curFlowId = flowId;

      this.getFlowParamList(flowId);
    },
 
    //  获取右侧的下拉
    getFlowParamList(flowId) {
      let self = this;
      //清空流程参数信息
      self.flowParamList = [];
      let path = this.$api.manageApi.getParam;
      let param = {
        workFlowId: flowId,
      };

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          let content = res.data.data;
          let inputParam = JSON.parse(content.processParameters).inputParam;
          let globalParam = JSON.parse(content.processParameters).globalParam;

          let tempFirst = {
            label: "请选择",
            value: "dummy",
          };
          self.flowParamList.push(tempFirst);

          for (let gParam of globalParam) {
            let showGlobalLabel = "基本参数" + " - " + gParam.desc;
            let globalFlowParam = {
              label: showGlobalLabel,
              value: gParam.workflowInputKey,
            };
            self.flowParamList.push(globalFlowParam);
          }

          for (let paramFlow of inputParam) {
            for (let paramAlgo of paramFlow) {
              let showLabel = paramAlgo.groupName + " - " + paramAlgo.desc;
              let flowParam = {
                label: showLabel,
                value: paramAlgo.workflowInputKey,
              };
              self.flowParamList.push(flowParam);
            }
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    //获取右侧参数列表 showParamList  的 label 和 value
    getShowParamList(taskType) {
      let path = this.$api.manageApi.getAllChildByDictCode;
      let param = { dictCode: taskType };
      this.showParamList = [];

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          let content = res.data.data;

          for (let i = 0; i < content.dictCodeList.length; i++) {
            let tempParam = {
              value: content.dictCodeList[i].dictCode,
              label: content.dictCodeList[i].dictName,
              paramValue: "",
            };
            this.showParamList.push(tempParam);
          }
        }
      });
    },
    //拿到流程下拉
    getFlowInfoList() {
      this.curFlowId = -1;
      this.flowInfoList = [];

      //"{"SatelliteSensor-Landsat5":["TM"],"ProducClass-叶面积指数产品LAI":["经验模型"],"ProducType-产品类型":["单景产品"],"workType-生产类型":["裁切","融合"]}"
      let filterObject = new Object();

      //关闭卫星选择
      for (let selectInfoItem of this.selectInfoList) {
        let labelSatelliteSensor =
          "SatelliteSensor-" + selectInfoItem.satellite;
        filterObject[labelSatelliteSensor] = selectInfoItem.sensors;
      }

      // 关闭产品类型
      let labelProducType = "ProducType-产品类型";
      let producTypes = [];
      producTypes.push(this.curProductType + "产品");
      filterObject[labelProducType] = producTypes;

      let labelWorkType = "workType-生产类型";
      let workTypes = [];
      for (let taskType of this.taskTypeList) {
        if (taskType.value == this.curTaskType) {
          workTypes.push(taskType.label);
          break;
        }
      }
      filterObject[labelWorkType] = workTypes;

      //获取流程
      let path = this.$api.manageApi.search;
      let labels = JSON.stringify(filterObject);
      if (labels == "") {
        labels = null;
      } else {
        labels = encodeURIComponent(JSON.stringify(filterObject));

        console.log(
          decodeURIComponent(JSON.stringify(filterObject)) + ">>>>>>>>"
        );
        console.log(
          decodeURIComponent(JSON.stringify(filterObject)) + ">>>>>>>>"
        );
      }

      let param = {
        labels: labels, //标签编号
      };
      this.http.get(path, param).then((res) => {
        if (res.data.message == "success") {
          let flowInfos = res.data.data;

          for (let flowInfo of flowInfos) {
            let flowInfoItem = {
              label: flowInfo.workflowName,
              value: flowInfo.id,
            };
            this.flowInfoList.push(flowInfoItem);
          }
        }
      });
    },

    selectResolution(event) {
      let self = this;
      let resolution = event.target.value;

      self.updatePropertyData.upResolution = resolution;
      self.curResolution = resolution;
      self.getFlowInfoList();

      //清空流程参数信息
      self.flowParamList = [];
      self.curInputParamKey = "";
      self.curOutputParamKey = "";
    },
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
      this.getMetaDataList();
    },
    getBadge(status) {
      switch (status) {
        case 0:
          return failedIcon;
        case 1:
          return endIcon;
      }
    },
    getTaskTypeLabel(taskType) {
      for (let temp of this.taskTypeList) {
        if (taskType == temp.value) {
          return temp.label;
        }
      }
      return taskType;
    },
    getSkipAutoLabel(skipAuto) {
      for (let temp of this.autoTypeList) {
        if (skipAuto == temp.value) {
          return temp.label;
        }
      }
      return skipAuto;
    },
    getInfo(val) {
      this.clickId = val.id;
      this.item = val;
      this.curTaskType = val.taskType;

      this.getShowParamList(this.curTaskType);
      let paramKeys = JSON.parse(val.matchValue);

      let path = this.$api.manageApi.getParam;
      let param = {
        workFlowId: val.flowId,
      };

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          let content = res.data.data;
          let inputParam = JSON.parse(content.processParameters).inputParam;
          let globalParam = JSON.parse(content.processParameters).globalParam;

          for (let gParam of globalParam) {
            for (let key in paramKeys) {
              if (paramKeys[key] == gParam.workflowInputKey) {
                this.showParamList.forEach((item, index) => {
                  if (item.value == key) {
                    this.showParamList[index].paramValue =
                      "基本参数" + " - " + gParam.desc;
                  }
                });
                continue;
              }
            }
          }

          for (let paramFlow of inputParam) {
            for (let paramAlgo of paramFlow) {
              for (let key in paramKeys) {
                if (paramKeys[key] == paramAlgo.workflowInputKey) {
                  this.showParamList.forEach((item, index) => {
                    if (item.value == key) {
                      this.showParamList[index].paramValue =
                        paramAlgo.groupName + " - " + paramAlgo.desc;
                    }
                  });
                  continue;
                }
              }
            }
          }
        }
        //获取参数完成后，显示详情页面
        this.getShow = true;
      });
    },
    role(id) {
      this.bindShow = true;
      this.clickId = id;
      let self = this;
      let path = this.$api.manageApi.getUsersRole;
      let param = {
        userId: this.clickId,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.data1 = res.data.data.roleList;
          for (let i = 0; i < self.data1.length; i++) {
            let id = self.data1[i].id;
            if (res.data.data.selectList.indexOf(id) != -1) {
              self.data1[i]._checked = true;
            }
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    addTemplate() {
      let self = this;

      //重置信息
      self.selectInfoList = [];
      self.curProductType = "单景";
      self.curTaskType = "";
      self.flowPropertyData = {
        satellite: "",
        sensor: "",
        resolution: "",
        productType: "",
        taskType: "",
        matchValue: "",
        flowId: -1,
        flowName: "",
        satelliteLevel: "",
        skipAuto:-1,
      };
      self.flowInfoList = [];
      self.flowParamList = [];
      self.resolutionShowList = [];

      if (this.taskTypeList.length > 0) {
        this.curTaskType = this.taskTypeList[0].value;
        this.getShowParamList(this.curTaskType);
      }

      //获取分辨率列表
      let path = this.$api.manageApi.queryRelated;
      let param = {
        pageNum: -1,
        pageSize: -1,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          let content = res.data.data;

          for (let i = 0; i < content.length; i++) {
            if (self.resolutionShowList.indexOf(content[i].resolution) == -1) {
              self.resolutionShowList.push(content[i].resolution);
            }
          }
        }
      });

      this.addShow = true;
    },
    //获取生产类型
    getTaskTypeList() {
      let path = this.$api.manageApi.getAllChildByDictCode;
      let param = { dictCode: "productType" };
      this.taskTypeList = [];

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          let content = res.data.data;

          for (let i = 0; i < content.dictCodeList.length; i++) {
            let tempParam = {
              value: content.dictCodeList[i].dictCode,
              label: content.dictCodeList[i].dictName,
            };
            this.taskTypeList.push(tempParam);
          }
        }
      });
    },
    addOk() {
      let self = this;
      let params = self.paramKeyList;

      self.flowPropertyData.matchValue = JSON.stringify(params);
      self.flowPropertyData.satelliteLevel = JSON.stringify(
        self.selectInfoList
      );

      self.flowPropertyData.productType = self.curProductType;
      self.flowPropertyData.taskType = self.curTaskType;
      self.flowPropertyData.resolution = self.curResolution;
      self.flowPropertyData.skipAuto = self.curSkipAuto;
      let path = this.$api.manageApi.flowPropertyCreate;
      let param = self.flowPropertyData;
        console.log(self.flowPropertyData,'11')
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.addShow = false;
        
          this.flowPropertyData = {
            satellite: "",
            sensor: "",
            resolution: "",
            productType: "",
            taskType: "",
            matchValue: "",
            flowId: -1,
            flowName: "",
            satelliteLevel: "",
            skipAuto:-1,
          };
          this.$Message.success(res.data.message);
          this.getFlowPropertyList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    unLock(id) {
      this.unLockShow = true;
      this.clickId = id;
    },
    unLockCancel() {
      this.unLockShow = false;
    },
    unLockOk() {
      let self = this;
      let path = self.$api.manageApi.ban + "/" + self.clickId;
      let param = {
        type: 0,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.unLockShow = false;
          self.$Message.success(res.data.message);
          self.getFlowPropertyList();
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },
    lockOk() {
      let tableData = this.data;
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].id === this.clickId) {
          tableData[i].isLock = 0;
        }
      }
      let self = this;
      let path = this.$api.manageApi.ban + "/" + this.clickId;
      let param = {
        type: 1,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.lockShow = false;
          this.$Message.success(res.data.message);
          self.getFlowPropertyList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    lockCancel() {
      this.lockShow = false;
    },
    addCancel() {
      this.addShow = false;
    },
    product(id) {
      this.permissionShow = true;
      this.clickId = id;
    },
    getOk() {
      this.getShow = false;
    },
    lockUser(id) {
      this.lockShow = true;
      this.clickId = id;
    },
    getCancel() {
      this.getShow = false;
    },
    roleCancel() {
      this.roleShow = false;
    },
    perCancel() {
      this.permissionShow = false;
    },
    getFlowPropertyList() {
      let self = this;
      let path = this.$api.manageApi.query;
      let param = {
        pageNum: self.currentPage,
        pageSize: self.pageSize,
      };

      let getAxiosData = { url: path };
      self.$refs.table.getRefreshTable(param, getAxiosData);

      //以前接口功能
      // this.http.get(path, param).then((res) => {
      //   self.allNum = res.data.data.total;
      //   if (res.data.success) {
      //     self.total = Math.ceil(res.data.data.total / self.pageSize);
      //     self.data = res.data.data.dataList;
      //     for (let i = 0; i < self.data.length; i++) {
      //       self.data[i].number =
      //         (self.currentPage - 1) * self.pageSize + i + 1;
      //       if (self.data[i].login_count == undefined) {
      //         self.data[i].login_count = "";
      //       }
      //     }
      //   } else {
      //     this.$Message.error(res.data.message);
      //   }
      // });
    },
    getOrg() {
      let self = this;
      let path = this.$api.manageApi.getTree;
      let param = {
        enterId: self.enterId,
        isTree: false,
      };
      this.http.get(path, param).then((res) => {
        self.loading = false;
        if (res.data.code == 0) {
          for (let i = 0; i < res.data.data.length; i++) {
            let param = {
              label: res.data.data[i].name,
              value: res.data.data[i].id,
            };
            self.orgList.push(param);
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    getAll() {
      let self = this;
      let path = this.$api.manageApi.enterprise;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          self.enterData = res.data.data.dataList;
          for (let i = 0; i < self.enterData.length; i++) {
            let param = {
              label: self.enterData[i].name,
              value: self.enterData[i].id,
            };
            self.enterList.push(param);
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    selectAddInfo() {

      let self = this;

      let setting = {
        check: {
          enable: true,
          nocheckInherit: false,
          checkTypeFlag: true,
          callbackFlag: true,
        },
        data: {
          simpleData: {
            enable: true,
          },
        },
        callback: {
          beforeClick: this.beforeClick,
          onClick: this.zTreeOnClick,
          onCheck: this.zTreePushTaskOnCheck,
          onExpand: this.zTreeOnClick,
        },
      };

      let path = this.$api.manageApi.queryRelated;
      let param = {
        pageNum: -1,
        pageSize: -1,
      };

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.showSelectAddInfoZtreeModal = true;
          self.addShow = false;

          let content = res.data.data;
          let ztreeContent = [];
          let SatelliteNameList = [];
          let tempZtreeInfos = [];

          for (let item of content) {
            //当前卫星节点
            let curSatelliteName = item.satelliteName;

            if (SatelliteNameList.indexOf(curSatelliteName) == -1) {
              let isChecked = self.judgeIsChecked(curSatelliteName, "");
              let node = {
                name: curSatelliteName,
                id: curSatelliteName,
                pId: 0,
                checked: isChecked,
              };
              ztreeContent.push(node);
              SatelliteNameList.push(curSatelliteName);

              let tempInfo = {
                satellite: curSatelliteName,
                sensors: [],
              };
              tempZtreeInfos.push(tempInfo);
            }

            item.sensors.forEach((ele, i) => {
              Object.keys(ele).forEach((tempvalue) => {
                let sensor = item.sensors[i][tempvalue];
                for (let tempInfo of tempZtreeInfos) {
                  if (
                    tempInfo.satellite == curSatelliteName &&
                    tempInfo.sensors.indexOf(sensor) == -1
                  ) {
                    tempInfo.sensors.push(sensor);
                    let isChecked2 = self.judgeIsChecked(
                      curSatelliteName,
                      sensor
                    );

                    let childNode = {
                      name: sensor,
                      id: sensor,
                      pId: item.satelliteName,
                      checked: isChecked2,
                    };
                    ztreeContent.push(childNode);
                  }
                }
              });
            });
          }

          $.fn.zTree.init($("#selectInfoTree"), setting, ztreeContent);
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },
    selectUpdateInfo() {
      let self = this;

      let setting = {
        check: {
          enable: true,
          nocheckInherit: false,
          checkTypeFlag: true,
          callbackFlag: true,
        },
        data: {
          simpleData: {
            enable: true,
          },
        },
        callback: {
          beforeClick: this.beforeClick,
          onClick: this.zTreeOnClick,
          onCheck: this.zTreePushTaskOnCheck,
          onExpand: this.zTreeOnClick,
        },
      };

      let path = this.$api.manageApi.queryRelated;
      let param = {
        pageNum: -1,
        pageSize: -1,
      };

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.showSelectUpdateInfoZtreeModal = true;
          self.updateShow = false;

          let content = res.data.data;
          let ztreeContent = [];
          let SatelliteNameList = [];
          let tempZtreeInfos = [];

          for (let item of content) {
            //当前卫星节点
            let curSatelliteName = item.satelliteName;

            if (SatelliteNameList.indexOf(curSatelliteName) == -1) {
              let isChecked = self.judgeIsChecked(curSatelliteName, "");
              let node = {
                name: curSatelliteName,
                id: curSatelliteName,
                pId: 0,
                checked: isChecked,
              };
              ztreeContent.push(node);
              SatelliteNameList.push(curSatelliteName);

              let tempInfo = {
                satellite: curSatelliteName,
                sensors: [],
              };
              tempZtreeInfos.push(tempInfo);
            }

            item.sensors.forEach((ele, i) => {
              Object.keys(ele).forEach((tempvalue) => {
                let sensor = item.sensors[i][tempvalue];
                for (let tempInfo of tempZtreeInfos) {
                  if (
                    tempInfo.satellite == curSatelliteName &&
                    tempInfo.sensors.indexOf(sensor) == -1
                  ) {
                    tempInfo.sensors.push(sensor);
                    let isChecked2 = self.judgeIsChecked(
                      curSatelliteName,
                      sensor
                    );

                    let childNode = {
                      name: sensor,
                      id: sensor,
                      pId: item.satelliteName,
                      checked: isChecked2,
                    };
                    ztreeContent.push(childNode);
                  }
                }
              });
            });
          }

          $.fn.zTree.init($("#selectInfoTree2"), setting, ztreeContent);
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },
    judgeIsChecked(pName, cName) {
      let content = this.selectInfoList;

      for (let i = 0; i < content.length; i++) {
        if (content[i].satellite == pName) {
          if (cName == "") {
            return true;
          } else {
            for (let j = 0; j < content[i].sensors.length; j++) {
              if (cName != "" && content[i].sensors[j] == cName) {
                return true;
              }
            }
          }
        }
      }

      return false;
    },
    selectAddInfoOk() {
      this.selectInfoList = [];
      this.flowParamList = [];

      this.curFlowId = -1;
      this.curInputParamKey = "";
      this.curOutputParamKey = "";

      let sateList = [];
      let sensorList = [];

      let treeObj = $.fn.zTree.getZTreeObj("selectInfoTree"),
        nodes = treeObj.getCheckedNodes(true);
      let tempNode = "";

      for (let index in nodes) {
        let isExist = false;
        tempNode = nodes[index];

        if (tempNode.pId != null) {
          for (let tempInfo of this.selectInfoList) {
            if (tempInfo.satellite == tempNode.pId) {
              if (sensorList.indexOf(tempNode.id) == -1) {
                sensorList.push(tempNode.id);
              }

              tempInfo.sensors.push(tempNode.id);
              isExist = true;
            }
          }
          if (isExist == false) {
            let tempInfo2 = {
              satellite: tempNode.pId,
              sensors: [tempNode.id],
            };
            if (sensorList.indexOf(tempNode.id) == -1) {
              sensorList.push(tempNode.id);
            }

            sateList.push(tempNode.pId);
            this.selectInfoList.push(tempInfo2);
          }
        }
      }

      let info = "";
      for (let sate of sateList) {
        if (info == "") {
          info = sate;
        } else {
          info += "," + sate;
        }
      }
      this.flowPropertyData.satellite = info;

      info = "";
      for (let sensor of sensorList) {
        if (info == "") {
          info = sensor;
        } else {
          info += "," + sensor;
        }
      }
      this.flowPropertyData.sensor = info;

      this.showSelectAddInfoZtreeModal = false;
      this.addShow = true;

      this.getFlowInfoList();
    },
    selectAddInfoCancel() {
      this.showSelectAddInfoZtreeModal = false;
      this.addShow = true;
    },
    selectUpdateInfoOk() {
      this.selectInfoList = [];
      this.flowParamList = [];

      this.curFlowId = -1;
      this.curInputParamKey = "";
      this.curOutputParamKey = "";

      let sateList = [];
      let sensorList = [];

      let treeObj = $.fn.zTree.getZTreeObj("selectInfoTree2"),
        nodes = treeObj.getCheckedNodes(true);
      let tempNode = "";

      for (let index in nodes) {
        let isExist = false;
        tempNode = nodes[index];

        if (tempNode.pId != null) {
          for (let tempInfo of this.selectInfoList) {
            if (tempInfo.satellite == tempNode.pId) {
              if (sensorList.indexOf(tempNode.id) == -1) {
                sensorList.push(tempNode.id);
              }

              tempInfo.sensors.push(tempNode.id);
              isExist = true;
            }
          }
          if (isExist == false) {
            let tempInfo2 = {
              satellite: tempNode.pId,
              sensors: [tempNode.id],
            };
            if (sensorList.indexOf(tempNode.id) == -1) {
              sensorList.push(tempNode.id);
            }

            sateList.push(tempNode.pId);
            this.selectInfoList.push(tempInfo2);
          }
        }
      }

      let info = "";
      for (let sate of sateList) {
        if (info == "") {
          info = sate;
        } else {
          info += "," + sate;
        }
      }
      this.updatePropertyData.upSatellite = info;

      info = "";
      for (let sensor of sensorList) {
        if (info == "") {
          info = sensor;
        } else {
          info += "," + sensor;
        }
      }
      this.updatePropertyData.upSensor = info;

      this.showSelectUpdateInfoZtreeModal = false;
      this.updateShow = true;

      this.getFlowInfoList();
    },
    selectUpdateInfoCancel() {
      this.showSelectUpdateInfoZtreeModal = false;
      this.updateShow = true;
    },
   //编辑按钮
    update(val) {
      this.clickId = val.id;
      this.item = JSON.parse(JSON.stringify(val)); //deep copy
      let self = this;

      let path = this.$api.manageApi.queryRelated;
      let param = {
        pageNum: -1,
        pageSize: -1,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          let content = res.data.data;     
          self.resolutionShowList = [];

          for (let i = 0; i < content.length; i++) {
            if (
              self.resolutionShowList.indexOf(
                content[i].resolution.toString()
              ) == -1
            ) {
              self.resolutionShowList.push(content[i].resolution.toString());
            }
          }
        }
      });
  console.log(val,'val')
      self.clickId = val.id;
      self.flowPropertyData = val;
      self.selectInfoList = JSON.parse(val.satelliteLevel);
      self.curProductType = val.productType;
      self.curSkipAuto = val.skipAuto;
      self.curTaskType = val.taskType;

      self.getFlowInfoList();
      self.getFlowParamList(val.flowId);

      self.curFlowId = val.flowId;

      self.curUpProductType = val.productType;
      self.curUpTaskType = val.taskType;
      self.curUpResolution = val.resolution;

      self.updatePropertyData.upSatellite = val.satellite;
      self.updatePropertyData.upSensor = val.sensor;
      self.updatePropertyData.upResolution = val.resolution;
      self.updatePropertyData.upProductType = val.productType;
      self.updatePropertyData.upTaskType = val.taskType;
      self.updatePropertyData.upFlowId = val.flowId;
      self.updatePropertyData.upFlowName = val.flowName;
      self.updatePropertyData.upSkipAuto = val.skipAuto;

      this.getShowParamList(val.taskType);
      let paramKeys = JSON.parse(val.matchValue);

      path = this.$api.manageApi.getParam;
      param = {
        workFlowId: val.flowId,
      };

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          let content = res.data.data;
          let inputParam = JSON.parse(content.processParameters).inputParam;
          let globalParam = JSON.parse(content.processParameters).globalParam;

          for (let gParam of globalParam) {
            for (let key in paramKeys) {
              if (paramKeys[key] == gParam.workflowInputKey) {
                this.showParamList.forEach((item, index) => {
                  if (item.value == key) {
                    this.showParamList[index].paramValue =
                      gParam.workflowInputKey;
                    self.paramKeyList[key] = gParam.workflowInputKey;
                  }
                });
                continue;
              }
            }
          }

          for (let paramFlow of inputParam) {
            for (let paramAlgo of paramFlow) {
              for (let key in paramKeys) {
                if (paramKeys[key] == paramAlgo.workflowInputKey) {
                  this.showParamList.forEach((item, index) => {
                    if (item.value == key) {
                      this.showParamList[index].paramValue =
                        paramAlgo.workflowInputKey;
                      self.paramKeyList[key] = paramAlgo.workflowInputKey;
                    }
                  });
                  continue;
                }
              }
            }
          }
        }
      });

      self.updateShow = true;
    },
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    updateOk() {
      let self = this;
      let params = self.paramKeyList;
      console.log(params,'11')

      self.flowPropertyData.satellite = self.updatePropertyData.upSatellite;
      self.flowPropertyData.sensor = self.updatePropertyData.upSensor;
      self.flowPropertyData.resolution = self.updatePropertyData.upResolution;
      self.flowPropertyData.productType = self.updatePropertyData.upProductType;
      self.flowPropertyData.taskType = self.updatePropertyData.upTaskType;
      self.flowPropertyData.flowId = self.updatePropertyData.upFlowId;
      self.flowPropertyData.flowName = self.updatePropertyData.upFlowName;
      self.flowPropertyData.skipAuto = self.updatePropertyData.upSkipAuto;
      self.flowPropertyData.matchValue = JSON.stringify(params);
      self.flowPropertyData.satelliteLevel = JSON.stringify(
        self.selectInfoList
      );

      let path = this.$api.manageApi.flowPropertyUpdate + "/" + self.clickId;
      let param = self.flowPropertyData;

      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.updateShow = false;
          this.flowPropertyData = {
            satellite: "",
            sensor: "",
            resolution: "",
            productType: "",
            taskType: "",
            matchValue: "",
            algModel: "",
            flowId: -1,
            flowName: "",
            satelliteLevel: "",
          };
          this.$Message.success(res.data.message);
          this.getFlowPropertyList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },
    delOk() {
      let self = this;
      let path = this.$api.manageApi.flowPropertyDelete + "/" + self.clickId;
      this.http.delete(path).then((res) => {
        this.delShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getFlowPropertyList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    delCancel() {
      this.delShow = false;
    },
  },

  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getFlowPropertyList();
    },
    proCPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getFlowPropertyList();
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getFlowPropertyList();
    },
    enterId(newVal, oldVal) {
      this.enterId = newVal;
      this.getOrg();
    },
    orgId(newVal, oldVal) {
      this.orgId = newVal;
      this.userData.organizationId = newVal;
    },
  },
};
</script>

<style scoped>
.col-xl-12 {
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (min-width: 1367px) {
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.templateTitle {
  margin-bottom: 0 !important;
}

.page-link:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}

.templateMangeTable {
  height: 100%;
  overflow-y: auto;
}
.template {
  height: calc(100% - 52px);
  overflow-y: auto;
}
.ipTestStyle {
  font-size: 8px;
  width: 250px;
  height: 2px;
  margin-top: -6px;
  margin-bottom: 16px;
  margin-left: 120px;
}
.spanLabel {
  font-size: 14px;
}
.btnSelectInfo {
  width: 70px;
  height: 29px;
  font-size: 14px;
  margin-left: 18px;
  margin-bottom: 11px;
  margin-top: 10px;
}
.treeDiv {
  height: 400px;
  width: 466px;
  overflow-y: auto;
}
.showContent {
  height: 466px;
}
.showContentLeft {
  max-width: 50%;
}
.showContentRight {
  max-width: 50%;
  height: 466px;
  overflow-x: hidden;
  overflow-y: auto;
}
.paramli {
  align-items: center;
  display: flex;
  height: 50px;
}
.selectParamKey {
  width: 95%;
  position: absolute;
  left: 105px;
  margin-bottom: 0;
}
.selectParamLabel {
  width: 25%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.onButton:hover {
  color: white;
}

/deep/.col-form-label {
  text-align: right;
}
</style>
